<div id="map"></div>
<script>
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-41.62667, 26.11598],
        zoom: 0
    });

    map.on('load', function() {
        map.addLayer({
            'id': 'route',
            'type': 'line',
            'source': {
                'type': 'geojson',
                'data': {
                    'type': 'Feature',
                    'properties': {},
                    'geometry': {
                        'type': 'LineString',
                        'coordinates': [
                            [-72.42187, -16.59408],
                            [140.27343, 35.67514]
                        ]
                    }
                }
            },
            'layout': { 'line-cap': 'round' },
            'paint': {
                'line-color': '#007296',
                'line-width': 4
            }
        });

        map.addLayer({
            'id': 'route-label',
            'type': 'symbol',
            'source': 'route',
            'layout': {
                'symbol-placement': 'line-center',
                'text-field': 'Crosses the world'
            }
        });

        map.addLayer({
            'id': 'route-two',
            'type': 'line',
            'source': {
                'type': 'geojson',
                'data': {
                    'type': 'Feature',
                    'properties': {},
                    'geometry': {
                        'type': 'LineString',
                        // To draw a line across the 180th meridian,
                        // if the longitude of the second point minus
                        // the longitude of original (or previous) point is > 180,
                        // subtract 360 from the longitude of the second point.
                        // If it is less than 180, add 360 to the second point.
                        'coordinates': [
                            [-72.42187, -16.59408],
                            [-219.72657, 35.67514]
                        ]
                    }
                }
            },
            'layout': { 'line-cap': 'round' },
            'paint': {
                'line-color': '#F06317',
                'line-width': 4
            }
        });

        map.addLayer({
            'id': 'route-two-label',
            'type': 'symbol',
            'source': 'route-two',
            'layout': {
                'symbol-placement': 'line-center',
                'text-field': 'Crosses 180th meridian'
            }
        });
    });
</script>
